<template>
  <div class="comput-result">
    <div class="result-box">
      <div class="tabs-box">
        <div class="tabs-title">
          <el-input v-model="state.name" placeholder="请输入" clearable>
            <template #append>
              <el-icon @click="handleClickIcon"><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <el-tree
          highlight-current
          style="max-width: 600px"
          :data="state.sectionArr"
          node-key="id"
          :current-node-key="4"
          :props="defaultProps"
          default-expand-all
          @node-click="handleClickTabs"
        >
          <template #default="{ node, data }">
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              :content="node.label"
              :disabled="node.label.length < 6"
            >
              <div class="tree-item">
                <span class="node">{{ node.label }}</span>
              </div>
            </el-tooltip>
            <el-icon
              v-if="!data?.children"
              class="position-btn"
              @click="handleClickTabsPosion(data)"
              ><Position
            /></el-icon>
          </template>
        </el-tree>
      </div>
      <div class="box-right">
        <div class="switch-box">
          <div class="right-btn-plus">
            <div class="title">{{ state.blkcdName }}-预报结果</div>
            <div class="max-btn-box">
              <el-button
                v-if="props.showBtn"
                type="info"
                class="btn-plus"
                @click="handleAmplify"
                link
              >
                <el-icon>
                  <FullScreen />
                </el-icon>
              </el-button>
            </div>
            <!-- <el-button
              v-if="props.showBtn"
              type="info"
              class="btn-plus"
              @click="handleAmplify"
              link
            >
              <el-icon>
                <FullScreen />
              </el-icon>
            </el-button> -->
          </div>
          <!-- <div class="flex-box">
            <div class="btn-box">
              <span>水文模型:</span>
              <el-checkbox-group
                v-model="state.checkModels"
                v-for="(item, index) in state.models"
                :key="index"
                @change="handleChangeModels"
              >
                <el-checkbox :label="item.label" />
              </el-checkbox-group>
            </div>
            <div class="flex-right-box">
              <span class="key">推荐模型:</span>
              <span class="value">新安江</span>
            </div>
          </div> -->

          <div class="flex-box">
            <!-- <div class="btn-box">
              <span>调度方式:</span>
              <el-checkbox-group
                v-model="state.checkModelType"
                v-for="(item, index) in state.modelType"
                :key="index"
                @change="handleChangeModelType"
              >
                <el-checkbox :label="item.label" />
              </el-checkbox-group>
            </div> -->
            <div class="ul-box">
              <div
                v-for="(item, index) in state.showBgItem"
                :key="index"
                :class="['ul-item', state.flagItem == index ? 'clickBg' : '']"
                @click="handleClickShow(index)"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="scroll-box">
            <div class="echarts-table-box">
              <div class="echarts-box" v-show="state.tableShow">
                <SwDispatchChart
                  chart-key="result"
                  v-if="state.waterFlag == 1"
                  height="100%"
                  :x-labels="state.sysTimes"
                  :servers="state.servers"
                />
                <SkDispatchChart
                  chart-key="result"
                  :is-show="true"
                  v-else
                  height="100%"
                  :x-labels="state.sysTimes"
                  :servers="state.servers"
                />
                <!-- <div
                class="show-btn"
                @click="handleClickShow"
                v-if="state.showTable"
              >
                <span>展开</span>
                <el-icon>
                  <DArrowLeft />
                </el-icon>
              </div> -->
              </div>
              <div
                :class="['table-box', state.tableShow ? '' : 'table-box-show']"
                v-show="!state.showTable"
              >
                <el-table :data="state.servers[0]?.ccResult" border v-if="state.waterFlag == 2">
                  <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="jp" label="净雨值" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="入库流量（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}` }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="出库流量（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{
                        `${row.rotq !== '' ? row.rotq : '--'}/${row.otq !== '' ? row.otq : '--'}`
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="水库水位（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rzr !== '' ? row.rzr : '--'}/${row.zr !== '' ? row.zr : '--'}` }}
                    </template>
                  </el-table-column>
                </el-table>
                <el-table :data="state.servers[0]?.ccResult" border v-else>
                  <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="jp" label="净雨值" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="河道流量（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}` }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="河道水位（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rz !== '' ? row.rz : '--'}/${row.fz !== '' ? row.fz : '--'}` }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="dropDown-box">
              <el-collapse v-model="state.activeName" @change="handleDialog">
                <el-collapse-item name="1">
                  <template #title>
                    <div class="coll-title">
                      <div class="ip-word">
                        <span>特征统计:</span>
                      </div>

                      <div class="ip-icon">
                        <i :class="state.collapseActiveSource ? 'downArrow2' : 'downArrow1'"></i>
                      </div>
                    </div>
                  </template>
                  <div class="coll-main">
                    <el-table :data="state.servers" style="width: 100%">
                      <!-- <el-table-column align="center" prop="prop" label="是否选用">
                      <template :slot-scope="scope">
                        <el-radio
                          v-model="radio"
                          :label="scope.row.id"
                          @change="handleRadio(scope.$index, scope.row)"
                        >
                          &nbsp;
                        </el-radio>
                      </template>
                    </el-table-column> -->
                      <el-table-column prop="modelName" label="预报模型" align="center" />
                      <el-table-column label="计算/实测洪峰流量" align="center">
                        <template #default="{ row }">
                          {{ row.fcMxq + '/' + row.rlMxq }}
                        </template>
                      </el-table-column>
                      <el-table-column label="计算/实测峰现时间" align="center">
                        <template #default="{ row }">
                          {{ row.fcMxt + '/' + row.rlMxt }}
                        </template>
                      </el-table-column>
                      <el-table-column label="计算/实测洪水总量" align="center">
                        <template #default="{ row }">
                          {{ row.fcV + '/' + row.rlV }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="flCoef" label="产流系数" align="center" />
                    </el-table>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 特征值 -->
  </div>
  <!-- 结果详情 -->
  <resultDetail ref="resDetailRef" :watershedId="props.watershedId" />
</template>
<script setup>
import { ref, reactive, onMounted, watch, defineEmits, nextTick, defineExpose } from 'vue'
//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
//特征值
// import mulTable from './cpns/mulTable.vue'
import EigenValue from './cpns/EigenValue/index.vue'
//详情
import resultDetail from './cpns/resultDetail/index.vue'
import { useDispatchManage1, useDispatchManageBlkcdGc } from '@/store/modules/dispatch-manage.js'
import { storeToRefs } from 'pinia'
import { assignUniqueIds } from '@/utils/index'
import {
  getGradeSections,

  // 查看计算结果
  getManualSchemesresult,
  // getDispatchSchemeDetail,
  // 查询子方案
  childrenSchemes
} from '@/services/modules/dispatch-manage'
import emitter from '@/utils/bus'
const props = defineProps({
  watershedId: {
    type: String,
    default: ''
  },
  ccInfo: {
    type: Array,
    default: () => []
  },
  tabsId: {
    type: String,
    default: ''
  },
  scid: {
    type: Object,
    default: () => {}
  },
  checkedSc: {
    type: Array,
    default: () => []
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  // 父方案选择的模型类型
  fatherTypeId: {
    type: String,
    // 默认大汶河流域
    default: ''
  },
  // 父方案id
  fatherId: {
    type: String,
    // 默认大汶河流域
    default: ''
  },
  childScid: {
    type: String,
    default: ''
  }
})

const mulTableRef = ref(null)
const resDetailRef = ref(null)
const dialogVisible = ref(false)
const ccInfos = ref([])
const calcResult = ref({ info: {} })
const currentIndex = ref(0)
const currentTime = ref(0)
const defaultProps = {
  children: 'children',
  label: 'groupName'
}
let state = reactive({
  scId: '',
  activeItem: '',
  // 子方案列表
  childSchemeList: [],
  checkedScheme: [],
  modelInfo: [],
  checkModelType: [],
  checkModels: [],
  models: [],
  modelType: [],
  showBgItem: ['图', '混', '表'],
  flagItem: 0,
  tableShow: true,
  activeName: ['1'],
  blkcdName: '',
  // activeName: 'first',
  showTable: true,
  collapseActive: '1',
  collapseActiveSource: false,
  servers: [],
  waterFlag: 1,
  sectionArr: [],
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  tableData: [],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: []
})
// 监听父方案id
watch(
  () => props.fatherId,
  () => {
    storeToRefs(useDispatchManage1()).fatherId.value = props.fatherId
    //  清空子方案
    state.childSchemeList = []
  },
  { immediate: true, deep: true }
)

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}
const data = ref([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1'
          }
        ]
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1'
          }
        ]
      }
    ]
  }
])
// 根据父方案模型类型 获取对应子方案
const handleChangeSelect = (val) => {
  // 父方案id
  childrenSchemes({ scid: props.fatherId, model: val }).then((res) => {
    if (res.code === 200) {
      // 获取子方案
      state.childSchemeList = res.data
      console.log(res.data, 9999)
      // 默认选择第一个子方案 查看计算结果
      // handlePlanItem({ scid: state.childSchemeList[0]?.scid, index: 0 })
    }
  })
}
// 监听父方案模型类型变化
watch(
  () => props.fatherTypeId,
  () => {
    storeToRefs(useDispatchManage1()).fatherTypeId.value = props.fatherTypeId
    handleChangeSelect(props.fatherTypeId)
  },
  { immediate: true, deep: true }
)
// 文字数量超过之后隐藏
function switchText(name) {
  if (name.length > 8) {
    return name.slice(0, 8) + '...'
  } else {
    return name
  }
}
// 点击调度方案
function handlePlanItem(scid) {
  console.log(scid, '调度11')
  state.servers = []
  if (scid) {
    state.scId = scid
    nextTick(() => {
      emitter.emit('clearEcharts')
      emitter.emit('initEcharts')
    })
    // 获取计算结果
    acceptComputeResult()
  }
}
// defineExpose({ handlePlanItem })

// 特征值
function handleDialog() {
  state.collapseActiveSource = !state.collapseActiveSource
}

function updateLeafProperty(data) {
  // 递归函数，只修改最后一层的属性名
  const isLeaf = (item) => !Array.isArray(item.children)
  const update = (item) => {
    if (isLeaf(item)) {
      if (Object.prototype.hasOwnProperty.call(item, oldPropertyName)) {
        item[newPropertyName] = item[oldPropertyName]
        delete item[oldPropertyName]
      }
    } else {
      item.children = item.children.map(update)
    }
    return item
  }
  const oldPropertyName = 'blknm'
  const newPropertyName = 'groupName'
  state.sectionArr = data.map(update)
  assignUniqueIds(state.sectionArr)

  handleClickTabs(state.sectionArr[0].children[0].children[0].children[0], 0)
}

// 查询水库水文站
function handleClickIcon() {
  getGradeSections({ scid: props.fatherId, blknm: state.name ? state.name : '' }).then((res) => {
    if (res.code === 200) {
      state.sectionArr = res.data
      updateLeafProperty(state.sectionArr)

      // if (state.sectionArr.length) {
      //   handleClickTabs(state.sectionArr.filter((v) => v.sttp == 'RR')[0], 0)
      // }
    }
  })
}
// 点击水库或水文站
function handleSwitchCollapse(val) {
  currentIndex.value = 0
  if (val == 1) {
    handleClickTabs(state.sectionArr.filter((v) => v.sttp == 'RR')[0], 0)
  } else {
    handleClickTabs(state.sectionArr.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
//展开 混
function handleClickShow(val) {
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
  // state.showTable = !state.showTable;
  state.flagItem = val
  if (val == 0) {
    // 图
    state.showTable = true
    state.tableShow = true
  } else if (val == 1) {
    // 混
    state.showTable = false
    state.tableShow = true
  } else {
    //表
    state.showTable = false
    // 将图关闭
    state.tableShow = false
  }
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
}

function clearEchart() {
  state.sysTimes = []
  state.rainArr = []
  state.rqArr = []
  state.fqArr = []
  state.rzArr = []
  state.fzArr = []
}
const emit = defineEmits(['showDialog'])
// 放大
function handleAmplify() {
  resDetailRef.value.handleOpenModal(
    { fatherId: props.fatherId, fatherTypeId: props.fatherTypeId },
    state.blkcdId
  )
}

//点击特征值
function handleClickBtn() {
  mulTableRef.value.handleOpenModal(state.servers)
}
function handleClickTabsPosion(data) {
  emitter.emit('fixedPosition', data)
}
// 点击水库或水文站
async function handleClickTabs(item, index) {
  if (!item?.blkcd) {
    return false
  }
  nextTick(() => {
    emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
  if (item) {
    state.servers = []
    state.blkcdName = item?.groupName
    state.blkcdId = item?.blkcd ? item?.blkcd : ''
    currentIndex.value = index
    if (item.sttp == 'RR') {
      state.waterFlag = 2
      console.log('11')
    } else {
      state.waterFlag = 1
      console.log('22')
    }
    // emitter.emit('fixedPosition', item)
    clearEchart()
    // 清空特征统计
    state.tableData = []
    // 获取计算结果
    if (state.blkcdId) acceptComputeResult()
  }

  // handleClickTime(ccInfos.value[0], 0)
}
watch(
  () => {
    props.childScid
  },
  () => {
    // acceptComputeResult()
    handlePlanItem(props.childScid)
    handleClickIcon()
  },
  {
    immediate: true,
    deep: true
  }
)
// 获取对应计算结果
function acceptComputeResult() {
  state.servers = []
  if (state.blkcdId) {
    getManualSchemesresult({
      scid: state.scId,
      blkcd: state.blkcdId
    }).then((res) => {
      if (res.code === 200) {
        console.log(res.data, '计算结果11')
        calcResult.value = res.data
        if (res.data?.length) {
          let arr = []
          arr = res.data.map((item) => {
            return {
              ...item,
              result: [{ ccResult: item.ccResult, warnInfo: item.warnInfo }]
            }
          })
          console.log(arr, '查看方案')
          if (arr?.length > 1) {
            arr = Array.from(new Set(arr.map(JSON.stringify)), JSON.parse)
          }
          state.servers = arr
        }
      }
    })
  }
}
</script>
<style lang="less" scoped>
.max-btn-box {
  width: 70px;
  display: flex;
  justify-content: flex-end;
  .btn-plus {
    font-size: 25px;
    font-weight: bold;
  }
}
.comput-result {
  width: 100%;
  font-size: 14px;
  height: 100%;
  background: white;

  // .plan-box {
  //   display: flex;
  //   height: 50px;
  //   width: 100%;
  //   margin-bottom: 10px;
  //   font-size: 14px;
  //   // overflow-x: auto;
  //   // background-color: rebeccapurple;
  //   .plan-box-left {
  //     display: flex;
  //     align-items: center;
  //     width: 110px;
  //     height: 100%;
  //     color: #909399;
  //     font-weight: 600;
  //   }
  //   .plan-box-right {
  //     display: flex;
  //     align-items: center;
  //     width: calc(100% - 160px);
  //     overflow-x: auto;
  //     white-space: nowrap;

  //     .plan-item {
  //       flex-shrink: 0;
  //       display: inline-block;
  //       cursor: pointer;
  //       font-weight: 500;
  //       padding: 0 30px;
  //       height: 25px;
  //       width: 130px !important;
  //       border: 1px solid #0773d1;
  //       white-space: nowrap;
  //       border-radius: 20px;
  //       line-height: 25px;
  //       text-align: center;
  //       margin-right: 20px;
  //     }
  //     .plan-item:hover {
  //       // border: 2px solid #3fa0f5;
  //       background-color: #328dde;
  //       color: white;
  //     }
  //     .item-active {
  //       width: 140px;
  //       color: white;
  //       background-color: #328dde;
  //     }
  //     // overflow-x: auto;
  //   }
  //   .max-btn-box {
  //     width: 70px;
  //     display: flex;
  //     justify-content: flex-end;
  //     .btn-plus {
  //       font-size: 25px;
  //       font-weight: bold;
  //     }
  //   }
  // }
  .result-box {
    width: 100%;
    // height: calc(100% - 50px);
    height: 100%;
    display: flex;
    .tabs-box {
      overflow: hidden;
      width: 250px;
      height: 100%;
      margin-right: 10px;
      // padding-right: 5px;
      border-radius: 5px;
      border: 1px solid #c8c2c29d;
      .tabs-title {
        display: flex;
        justify-content: center;
        width: 100%;
        // margin-top: 15px;
        // margin-left: 10px;
        height: 30px;
        // background: #f2f2f2;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        cursor: pointer;
      }
      :deep(.el-tree) {
        height: calc(100% - 40px);
        overflow-y: auto;
        margin-top: 5px;
        .el-tree-node {
          &.is-focusable.is-current {
            > div:nth-of-type(1) {
              color: #409eff;
              font-weight: 600;
              font-size: 15px;
            }
          }
          .el-tree-node__content {
            margin-top: 5px;
          }
          .el-tree-node__label {
           display: flex;
          }
        }
        .position-btn {
          margin-right: 20px;
        }
        .position-btn:hover {
          color: #0154db;
        }
        .tree-item {
          &.active {
            span {
              color: #0154db;
            }
          }
          .node {
            width: 100px;
            display: inline-block;
            overflow: hidden; /* 确保超出容器的文本被裁剪 */
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 超出部分显示为省略号 */
            // font-size: var(--content-fontsize);
          }
        }
      }
      // :deep(.el-collapse) {
      //   height: calc(100% - 30px);
      //   .mg10 {
      //     width: 100%;
      //     text-align: center;
      //     margin-left: 10px;
      //   }
      //   .el-collapse-item.is-active {
      //     height: calc(100% - 82px);
      //     .el-collapse-item__wrap {
      //       height: 100%;
      //       .el-collapse-item__content {
      //         height: calc(100% - 80px);
      //         overflow-y: auto;
      //       }
      //     }
      //   }
      // }
      .tabs-list {
        // height: calc(100% - 30px);
        // background: #d7d4d427;
        // overflow-y: auto;
        .list-item {
          display: flex;
          align-items: center;

          width: 100%;
          height: 30px;
          text-align: center;
          cursor: pointer;
          &.active {
            span {
              color: #0154db;
            }
          }
          span {
            width: 100%;
            color: black;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .position-btn {
            margin-right: 20px;
          }
          .position-btn:hover {
            color: #0154db;
          }
        }
        .list-item:hover {
          width: 100%;
          height: 30px;
          cursor: pointer;
          span {
            color: #0154db;
          }
        }
      }
    }
    .box-right {
      flex: 1;
      width: calc(100% - 205px);
      height: 100%;
      // overflow-y: auto;
      // overflow-x: hidden;
      .comput-times {
        width: 100%;
        height: 70px;
        .times-title {
          height: 30px;
          span {
            font-weight: 600;
          }
        }
        .times-list {
          display: flex;
          width: 100%;
          height: 40px;
          overflow-x: auto;
          white-space: nowrap;
          .times-item {
            width: 200px;
            height: 30px;
            border: 1px solid gray;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            padding: 0 15px;
            cursor: pointer;
            &.active {
              span {
                color: #0154db;
              }
            }
            &:hover {
              color: #0154db;
            }
            span {
              color: gray;
            }
          }
        }
      }
      .switch-box {
        width: 100%;
        height: 100%;
        // overflow-y: auto;
        .right-btn-plus {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: flex-end;
          .title {
            line-height: 50px;
            color: #409eff;
            margin-right: 40%;
          }
        }
        // .comput-result-box {
        //   width: 100%;
        //   .box-title {
        //     height: 30px;
        //     padding-top: 10px;
        //     span {
        //       font-weight: 600;
        //     }
        //   }
        //   .box-form {
        //     .form-item {
        //       display: flex;
        //       justify-content: space-between;
        //       // flex-wrap: wrap;
        //       // width: 100%;
        //       margin-left: 5px;
        //       .pass {
        //         color: #78ba1c;
        //       }
        //       .item-title {
        //         // flex: 0.25;
        //         margin-right: 20px;
        //         height: 30px;
        //         &:nth-of-type(1) {
        //           width: 35%;
        //         }
        //         span:nth-of-type(1) {
        //           margin-right: 10px;
        //         }
        //         span:nth-of-type(2) {
        //           font-weight: 600;
        //         }
        //       }
        //     }
        //   }
        // }
        // .computed-table {
        //   width: 100%;
        //   // height: 80px;
        //   overflow-x: auto;
        // }
        .flex-box {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
          .flex-right-box {
            line-height: 100%;
            margin-right: 20px;
            text-align: center;
            .value {
              color: #409eff;
            }
          }
          .ul-box {
            display: flex;
            justify-content: space-around;
            line-height: 20px;
            margin-right: 50px;
            text-align: center;
            // margin-bottom: 20px;
            width: 100px;
            height: 20px;
            border-radius: 20px;
            background-color: rgba(1, 84, 219, 0.3);

            .ul-item {
              width: 30px;
              height: 100%;
              border-radius: 20px;
              // background-color: #0154db;
              color: #ffffff;
              cursor: pointer;
              &:hover {
                background-color: #0154db;
                color: wheat;
              }
            }
            .clickBg {
              background-color: #0154db;
            }
          }
        }
        .scroll-box {
          height: calc(100% - 80px);
          overflow: auto;
        }
        .btn-box {
          display: flex;
          span {
            line-height: 30px;
            margin-right: 10px;
          }
          // text-align: right;
          // margin-right: 15px;
          // height: 30px;
        }
        .echarts-table-box {
          display: flex;
          width: 100%;
          height: 650px;
          position: relative;

          .echarts-box {
            flex: 1;
            min-width: 60%;
            height: 100%;
            // height: 600px;

            // height: calc(100%);
            // padding: 5px;
            position: relative;
            .show-btn {
              cursor: pointer;
              position: absolute;
              right: 0px;
              top: 0px;
            }
          }
          .table-box {
            width: 50%;
            // width: 100%;
            max-width: 100%;
            margin-left: 1%;
            position: relative;
            .hide-btn {
              cursor: pointer;
              position: absolute;
              height: 20px;
              top: 10px;
              right: 0;
              z-index: 10;
            }
            .el-table {
              height: 100%;
            }
            :deep(.el-tabs) {
              z-index: 11;
              height: 100%;
              .el-tabs__content {
                height: calc(100% - 55px);
                .el-tab-pane {
                  height: 100%;
                  .el-table {
                    height: 100%;
                    overflow-y: auto;
                  }
                }
              }
            }
          }
          .table-box-show {
            width: 100% !important;
          }
        }
        .dropDown-box {
          // height: 300px;
          height: auto;
          width: 100%;
          .el-collapse-item {
            :deep(.el-collapse-item__arrow) {
              display: none;
            }
            .coll-title {
              display: flex;
              position: relative;
              width: 100%;
              .ip-word {
                margin-right: 5px;
                span {
                  color: #0b31d8;
                }
              }
              .ip-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 10px;
                top: 15px;
                cursor: pointer;
                .downArrow1 {
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  background-image: url(@/assets/images/dispatch/u61.png);
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
                .downArrow2 {
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  transform: rotate(-180deg);
                  background-image: url(@/assets/images/dispatch/u61.png);
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
              }
            }
          }
          .coll-main {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
